<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./img/icon_huaji.ico">

    <title>成药性风险</title>

    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/risk.css">

    <script src="./js/ie-emulation-modes-warning.js"></script>

</head>


<body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">公司logo</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">设置</a></li>
                    <li><a href="#">简介</a></li>
                    <li><a href="#">帮助</a></li>
                    <li><a href="#">当前用户:Admin</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                </form>
            </div>
        </div>
    </nav>

    <div class="container-fluid task_tab">
        <div class="row">
            <div class="col-sm-1  hidden-xs">
            </div>

            <div class="col-sm-10 main">
                <!------------------------- task detail --------------------->
                <!-- part1  -->
                <div class="part1">
                    <h4>打分：&nbsp;75/100</h4>
                    <p></p>
                    <h4>建议：</h4>
                    <p>化合物基本符合类药五原则，并且具有溶解性、脂溶性较好，主要通过CYP2C9/2E1代谢，通过肾脏排泄。但毒性较大，容易引起胃肠道、呼吸道、皮肤等刺激作用，容易造成肾毒性、心脏毒性，引起胃出血，眼角膜刺激、皮肤刺激等副作用。由于其基本理化性质较好，但毒性较大，认为该化合物成药性评分为75/100，需要对其进行结构改造，通过改变毒性较大基团，如将酚羟基取代为酯基，提高生物利用度，改善其毒性，有利于成药。
                    </p>
                </div>

                <!-- part2 table -->
                <div class="part2">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead id="head1">
                                <tr>
                                    <th>#</th>
                                    <th>风险系数</th>
                                    <th>风险值</th>
                                    <th>单位</th>
                                    <th>风险程度</th>
                                    <th>正常值</th>
                                    <th>优化建议</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>


                <!-- part3 img+table -->

                <div class="part3">
                    <div class="p3_left">
                        <div class="img_box">
                            <img src="./img/youhuajianyi.jpg" alt="">
                        </div>
                    </div>
                    <div class="p3_right">
                        <div class="table-responsive">
                            <table class=" table-bordered" id="tab2">
                                <thead>
                                    <tr>
                                        <th>化合物</th>
                                        <th>化合物的解离度pKa</th>
                                        <th>在中性条件下的脂水分配系数SlogP</th>
                                        <th>水中溶解度S+Sw</th>
                                        <th>人空肠中化合物的有效渗透能力S+Peff</th>
                                        <th>人血浆蛋白游离分数hum_fup%</th>
                                        <th>人全血血浆化合物浓度比：hum_RBP</th>
                                        <th>化合物总体清除率hum_CLf</th>
                                        <th>肾排泄分数kidney_excretion%</th>
                                        <th>化合物稳定性hum_stab</th>
                                        <th>生物利用度F</th>
                                        <th>风险</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>


            </div> <!-- colsm9 finish -->

        </div> <!-- row finish -->
    </div>


    <!-- display table -->
    <script src="./js/sheet2.js"></script>
    <script src="./js/sheet5.js"></script>

    <script>
        var tbody0 = document.getElementsByTagName('tbody')[0];
        var tbody1 = document.getElementsByTagName('tbody')[1];

        function add_item_to_table(data_arr, target_tbody) {
            for (let index = 0; index < data_arr.length; index++) {
                var mod = `
            <tr>
                <td>${target_tbody.children.length + 1}</td>
                <td>${data_arr[index].key0}</td>
                <td>${data_arr[index].key1}</td>
                <td>${data_arr[index].key2}</td>
                <td>${data_arr[index].key3}</td>
                <td>${data_arr[index].key4}</td>
                <td>${data_arr[index].key5}</td>
            </tr>
            `
                target_tbody.innerHTML += mod;
            }
        }

        function add_item_to_table2(data_arr, target_tbody) {
            for (let index = 0; index < data_arr.length; index++) {
                var mod = `
            <tr>
                <td>${data_arr[index].name}</td>
                <td>${data_arr[index].value1}</td>
                <td>${data_arr[index].value2}</td>
                <td>${data_arr[index].value3}</td>
                <td>${data_arr[index].value4}</td>
                <td>${data_arr[index].value5}</td>
                <td>${data_arr[index].value6}</td>
                <td>${data_arr[index].value7}</td>
                <td>${data_arr[index].value8}</td>
                <td>${data_arr[index].value9}</td>
                <td>${data_arr[index].value10}</td>
                <td>${data_arr[index].value11}</td>                
            </tr>
            `
                target_tbody.innerHTML += mod;
            }
        }

        function display_table() {
            tbody0.innerHTML = '';
            tbody1.innerHTML = '';
            add_item_to_table(data_arr_sheet2, tbody0);
            add_item_to_table2(data_arr_sheet5, tbody1);

        }
        display_table()

    </script>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/holder.min.js"></script>
    <script src="./js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>